import React, { Component } from 'react';
import { Menu, ActivityIndicator, NavBar } from 'antd-mobile';
import { Redirect } from 'react-router-dom';

import '../css/menu.css';

const data = [
  {
    value: '1',
    label: '借款人',
    children: [
      {
        label: '借款人注册',
        value: '/',
        disabled: false,
      },
      {
        label: '借款人登录',
        value: '/applyLogin',
      }, {
        label: '发布贷款',
        value: '/applyForm',
      }, {
        label: '借款信息列表',
        value: '/applyList',
      }, {
        label: '借款单详情',
        value: '/applyDetail',
      }, ],
  }, {
    value: '2',
    label: '公司',
    children: [
      {
        label: '公司注册',
        value: '/companyReg',
      }, {
        label: '公司登录',
        value: '/companyLogin',
      }, {
        label: '待抢单列表',
        value: '/companyList',
      },  {
        label: '已抢单列表',
        value: '/companyTakeList',
      }, {
        label: '抢单详情',
        value: '/companyDetail',
      }, {
        label: '抢客户',
        value: '/companyClient',
      }],
  },
];

class APPMENU extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      initData: '',
      show: false,
      path: '',
      redirect: false,
    };
  }
  onChange = (value) => {
    console.log(value);
    let label = '';
    data.forEach((dataItem) => {
      if (dataItem.value === value[0]) {
        label = dataItem.label;
        if (dataItem.children && value[1]) {
          dataItem.children.forEach((cItem) => {
            if (cItem.value === value[1]) {
              label += ` ${cItem.label}`;
            }
          });
        }
      }
    });

    this.setState({ path: value[1], redirect:true });

    console.log(label);
  }
  handleClick = (e) => {
    e.preventDefault(); // Fix event propagation on Android
    this.setState({
      show: !this.state.show,
    });
    // mock for async data loading
    if (!this.state.initData) {
      setTimeout(() => {
        this.setState({
          initData: data,
        });
      }, 500);
    }
  }

  onMaskClick = () => {
    this.setState({
      show: false,
    });
  }

  render() {
    if( this.state.redirect ){
      return (
        <div>
        <APPMENU />
        <Redirect push to={this.state.path} />
        </div>
      );
    }

    const { initData, show } = this.state;
    const menuEl = (
      <Menu
        className="foo-menu"
        data={initData}
        value={['1']}
        onChange={this.onChange}
        height={document.documentElement.clientHeight * 0.6}
      />
    );
    const loadingEl = (
      <div style={{ width: '100%', height: document.documentElement.clientHeight * 0.6, display: 'flex', justifyContent: 'center' }}>
        <ActivityIndicator size="large" />
      </div>
    );
    return (
      <div className={show ? 'menu-active' : ''}>
        <div>
          <NavBar
            leftContent="菜单"
            mode="light"
            icon={<img src="https://gw.alipayobjects.com/zos/rmsportal/iXVHARNNlmdCGnwWxQPH.svg" className="am-icon am-icon-md" alt="" />}
            onLeftClick={this.handleClick}
            className="top-nav-bar"
          >
            小贷平台
          </NavBar>
        </div>
        {show ? initData ? menuEl : loadingEl : null}
        {show ? <div className="menu-mask" onClick={this.onMaskClick} /> : null}
      </div>
    );
  }
}

export default APPMENU;
